<template>
	<scroll-view class="sidebar" scroll-y="true">
		<uni-nav-menu :uniqueOpened="true" :active="splitFullPath(active)" activeKey="url"
			textColor="rgba(255,255,255,0.6)" activeTextColor="#fff" @select="select" backgroundColor="transparent">
			<uni-menu-sidebar v-if="!userInfo.user_id"></uni-menu-sidebar>
			<uni-menu-sidebar :data="navMenu.admin" v-else-if="userInfo.user_type == 1"></uni-menu-sidebar>
			<uni-menu-sidebar :data="navMenu.member" v-else></uni-menu-sidebar>
			<view>
			</view>
		</uni-nav-menu>
		
		<text class="out" v-if="userInfo.email" @click="logOut">{{ $t('home.logOut') }}</text>
		<!-- <button type="default" @click="$i18n.locale = $i18n.locale == 'zh' ? 'en' : 'zh'">切换语言</button> -->
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'

	import {
		logOut
	} from "../js_sdk/uni-admin/user.js"

	import config from '@/admin.config.js'

	export default {
		data() {
			return {
				...config.sideBar,
				defaultValue: '',
			}
		},
		computed: {
			...mapState('app', ['inited', 'navMenu', 'active']),
			...mapState('user', ['userInfo'])
		},
		// #ifdef H5
		watch: {
			$route: {
				immediate: true,
				handler(newRoute, oldRoute) {
					if (newRoute.fullPath !== (oldRoute && oldRoute.fullPath)) {
						this.changeMenuActive(newRoute.fullPath)
					}
				}
			},
			navMenu(val) {
				if (val.length) return
				let content
				if (this.userInfo.role.indexOf('admin') !== -1) {
					content = '菜单表中没有数据，请对 db_init.json 文件右键，初始化数据库'
				} else {
					content = '该用户未被授权访问任何菜单表中的菜单,请使用管理员账户为该用户赋权,可在权限管理、角色管理、菜单管理中操作,详见uniCloud admin文档'
				}
				setTimeout(() => {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: content
					})
				}, 16)
			}
		},
		// #endif
		methods: {
			...mapActions({
				changeMenuActive: 'app/changeMenuActive'
			}),
			...mapMutations("user", ["REMOVE_TOKEN"]),
			async logOut() {
				await logOut()
				this.REMOVE_TOKEN()
				uni.reLaunch({
					url: "/pages/login/login"
				});
			},
			select(e) {
				let url = e.url
				if (!url) {
					url = this.active
				}
				this.clickMenuItem(url)
			},
			clickMenuItem(url) {
				// #ifdef H5
				if (url.indexOf('http') === 0) {
					return window.open(url)
				}
				// #endif

				// url ��头可用有 / ，也可没��
				if (url[0] !== '/' && url.indexOf('http') !== 0) {
					url = '/' + url
				}
				// TODO 后续要调��
				uni.redirectTo({
					url: url,
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '页面 ' + url + ' 跳转失败',
							showCancel: false
						})
					}
				})
			},
			splitFullPath(path) {
				if (!path) path = '/'
				return path.split('?')[0]
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-menu-item {
		uni-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.sidebar {
		position: fixed;
		top: var(--top-window-height);
		width: 240px;
		height: calc(100vh - (var(--top-window-height)));
		box-sizing: border-box;
		border-right: 1px solid darken($left-window-bg-color, 8%);
		background-color: $left-window-bg-color;
		padding-bottom: 10px;
		background: linear-gradient(180deg, #3B993B 0%, #368534 38%, #5D7B29 100%);
	}

	.title {
		margin-left: 5px;
	}
</style>
